<template>
	<div class="upload-file">
		<el-upload :action="uploadFileUrl" :on-change="handleChange" name="upfile" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" :multiple="multiple" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :on-progress="uploadProcess" :show-file-list="false" class="upload-file-uploader" ref="upload">
			<!-- 上传按钮 -->
			<el-button type="primary">选取文件</el-button>
			<!-- 上传提示 -->
			<div class="el-upload__tip" slot="tip" v-if="showTip">
				请上传
				<template v-if="fileSize">
					大小不超过
					<b style="color: #f56c6c">{{ fileSize }}MB</b>
				</template>
				<template v-if="fileType">
					格式为
					<b style="color: #f56c6c">{{ fileType.join("/") }}</b>
				</template>
				的文件
			</div>
		</el-upload>

		<!-- 文件列表 -->
		<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
			<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
				<el-link :href="file.url" :underline="false" target="_blank">
					<span class="el-icon-document">{{ file.title || file.name }}</span>
				</el-link>
				<div class="ele-upload-list__item-content-action">
					<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
				</div>
			</li>
		</transition-group>
		<!--进度条-->
		<el-progress v-if="isPercentage" :percentage="percentage"></el-progress>
	</div>
</template>

<script>
export default {
	props: {
		// 值
		value: [String, Object, Array],
		// 大小限制(MB)
		fileSize: Number,
		// 响应处理函数
		responseFn: Function,
		// 文件类型, 例如['png', 'jpg', 'jpeg']
		fileType: Array,
		// 提示
		placeholder: String,
		// 是否禁用
		disabled: Boolean,
		// 是否显示文件大小
		isShowSize: {
			type: Boolean,
			default: true,
		},
		// 是否显示下载
		isCanDownload: {
			type: Boolean,
			default: true,
		},
		// 是否可删除
		isCanDelete: {
			type: Boolean,
			default: true,
		},
		// 是否显示删除确认弹窗
		isShowDeleteConfim: {
			type: Boolean,
			default: true,
		},
		// 是否可上传相同文件
		isCanUploadSame: {
			type: Boolean,
			default: true,
		},
		// 是否显示提示
		isShowTip: {
			type: Boolean,
			default: true,
		},
		// 是否显示上传成功的提示
		isShowSuccessTip: {
			type: Boolean,
			default: true,
		},
		// 是否支持多选文件
		// 同 element-ui upload 组件
		multiple: {
			type: Boolean,
			default: true,
		},
		// 最大允许上传个数
		// 同 element-ui upload 组件
		limit: Number,
		// 删除前的操作
		// 同 element-ui upload 组件
		beforeRemove: Function,
		// 课件名字
		coursewareName: String,
	},
	data() {
		return {
			uploadFileUrl: window.$conf.commonConf.baseUrl + "/system/oss/upload", // 上传的图片服务器地址
			isPercentage: false, //是否显示进度条
			percentage: 0,
			fileList: [],
			fileName: "",
		}
	},
	computed: {
		// 是否显示提示
		showTip() {
			return this.isShowTip && (this.fileType || this.fileSize)
		},
		// 列表
		list() {
			let temp = 1
			// console.log(this.value, "this.value")
			if (this.value) {
				// 首先将值转为数组
				const list = Array.isArray(this.value) ? this.value : [this.value]
				// 然后将数组转为对象数组
				return list.map(item => {
					if (typeof item === "string") {
						item = { name: item, url: item }
					}
					item.uid = item.uid || new Date().getTime() + temp++
					item.title = this.fileName
					return item
				})
			} else {
				this.fileList = []
				return []
			}
		},
	},
	methods: {
		// 上传前校检格式和大小
		handleBeforeUpload(file) {
			// 校检文件类型
			if (this.fileType) {
				let fileExtension = ""
				if (file.name.lastIndexOf(".") > -1) {
					fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1)
				}
				const isTypeOk = this.fileType.some(type => {
					if (file.type.indexOf(type) > -1) return true
					if (fileExtension && fileExtension.indexOf(type) > -1) return true
					return false
				})
				if (!isTypeOk) {
					this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`)
					return false
				}
			}
			// 校检文件大小
			if (this.fileSize) {
				const isLt = file.size / 1024 / 1024 < this.fileSize
				if (!isLt) {
					this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
					return false
				}
			}
			return true
		},
		// 文件个数超出
		handleExceed() {
			this.$message.error(`只允许上传单个文件`)
		},
		//进度条
		uploadProcess(event, file, fileList) {
			this.isPercentage = true
			this.percentage = file.percentage.toFixed(0) * 1
		},
		// 上传失败
		handleUploadError(err) {
			console.log(err, "err")
			this.$message.error("上传失败, 请重试")
		},
		// 上传成功回调
		handleUploadSuccess(res, file) {
			this.fileName = res.data.name
			this.$emit("changeName", this.fileName)
			this.percentage = file.percentage.toFixed(0) * 1
			if (res.code == "0") {
				this.$message.success("上传成功")
				this.$emit("input", { name: res.data.name, url: res.data.url })
			} else {
				this.$message.error(res.msg)
			}
			const timer = setTimeout(() => {
				this.percentage = 0
				this.isPercentage = false //是否显示进度条
			}, 500)
		},
		// 上传文件的回调
		async handleChange(file) {
			console.log(file, "file")
		},
		// 删除文件
		handleDelete(index) {
			this.percentage = 0
			this.isPercentage = false //是否显示进度条
			this.fileList.splice(index, 1)
			this.$emit("input", "")
			this.$emit("changeName", "")
		},
		// 获取文件名称
		getFileName(name) {
			console.log(name, "文件名称")
			if (name.lastIndexOf("/") > -1) {
				return name.slice(name.lastIndexOf("/") + 1).toLowerCase()
			} else {
				return ""
			}
		},
	},
	created() {
		this.fileList = this.list
	},
}
</script>

<style scoped lang="scss">
.upload-file-uploader {
	margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
	border: 1px solid #e4e7ed;
	line-height: 2;
	margin-bottom: 10px;
	position: relative;
}
.upload-file-list .ele-upload-list__item-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: inherit;
}
.ele-upload-list__item-content-action .el-link {
	margin-right: 10px;
}
</style>
